<template>
  <div class="body">
    <div class="hg_wd_top"></div>

    <div class="hg_wd_listbox">
      <h1>{{ data.name }}</h1>

      <h2>发布时间：{{ data.publishTime }}</h2>

      <div class="content" v-html="data.cmsArticle.content">
        <!-- <div>
                    <img
                        src="~/assets/img/hg/bannerceshi.png"
                        alt=""
                    />

                    <p>
                        4月8日，长沙海关副关长黄志强组织召开2021年度网络安全攻防演习动员会，要求该关各部门和隶属海关单位提高政台站位，增强责任意识，充分认识演习的重要意义。
                        做好统筹协调，加强上下联动，建立完舌网络安全防护工作机制;夯实基层网络安全基础，提升网络安全保障能力
                        4月8日，长沙海关副关长黄志强组织召开2021年度网络安全攻防演习动员会，要求该关各部门和隶属海关单位提高政台站位，增强责任意识，充分认识演习的重要意义
                    </p>
                </div>

                <p>
                    4月8日，长沙海关副关长黄志强组织召开2021年度网络安全攻防演习动员会，要求该关各部门和隶属海关单位提高政台站位，增强责任意识，充分认识演习的重要意义。
                    做好统筹协调，加强上下联动，建立完舌网络安全防护工作机制;夯实基层网络安全基础，提升网络安全保障能力
                    4月8日，长沙海关副关长黄志强组织召开2021年度网络安全攻防演习动员会，要求该关各部门和隶属海关单位提高政台站位，增强责任意识，充分认识演习的重要意义
                    4月8日，长沙海关副关长黄志强组织召开2021年度网络安全攻防演习动员会，要求该关各部门和隶属海关单位提高政台站位，增强责任意识，充分认识演习的重要意义。<br /><br />
                    做好统筹协调，加强上下联动，建立完舌网络安全防护工作机制;夯实基层网络安全基础，提升网络安全保障能力
                    4月8日，长沙海关副关长黄志强组织召开2021年度网络安全攻防演习动员会，要求该关各部门和隶属海关单位提高政台站位，增强责任意识，充分认识演习的重要意义
                    4月8日，长沙海关副关长黄志强组织召开2021年度网络安全攻防演习动员会，要求该关各部门和隶属海关单位提高政台站位，增强责任意识，充分认识演习的重要意义<br /><br />
                    做好统筹协调，加强上下联动，建立完舌网络安全防护工作机制;夯实基层网络安全基础，提升网络安全保障能力
                    4月8日，长沙海关副关长黄志强组织召开2021年度网络安全攻防演习动员会，要求该关各部门和隶属海关单位提高政台站位，增强责任意识，充分认识演习的重要意义
                    4月8日，长沙海关副关长黄志强组织召开2021年度网络安全攻防演习动员会，要求该关各部门和隶属海关单位提高政台站位，增强责任意识，充分认识演习的重要意义
                </p> -->
      </div>

      <el-collapse>
        <el-collapse-item
          :title="item.author"
          v-for="(item, index) in dataList.data"
          :name="index"
          :key="index"
        >
          <div @click="routerFn(item.id)">
            {{ item.author }}
          </div>
          <div @click="routerFn(item.id)">
            在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import appUtil from '~/assets/utils/appUtil'
import { mapState } from 'vuex'
export default {
  name: 'test',
  computed: {
    ...mapState({
      dataList: (state) => state.dataList,
    }),
  },
  data() {
    return {
      data: {
        cmsArticle: {
          content: '',
        },
      },
    }
  },
  mounted() {
    // this.getDetial();
  },
  methods: {
    getDetial() {
      const params = {
        typeId: appUtil.GetQueryString('typeId'),
        id: appUtil.GetQueryString('id'),
      }
      const url = `/ptp-cms/cmscontent/getContentDetail`
      this.$axios.get(url, { params: params }).then((res) => {
        if (res.data.code !== 0) {
          return this.$message({
            message: res.data.message,
            type: 'warning',
            duration: '1500',
          })
        }
        this.data = res.data.data
      })
    },
    routerFn(id) {
      console.log(id)
      this.$router.push({
        path: `/detailceshi/${id}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>

.body {
  overflow: hidden;
  width: 1000px;
  margin: 0 auto;
}

.hg_wd_top {
  height: 4px;
  background: #094194;
}

.hg_wd_listbox {
  padding: 45px 99px;

  h1 {
    font-size: 26px;
    font-weight: 600;
    color: #333333;
    padding: 0 24px;
    line-height: 35px;
    text-align: center;
  }

  h2 {
    border-bottom: 1px solid rgba(234, 234, 234, 1);
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
    padding: 13px 24px 17px 0;
    text-align: right;
    margin-bottom: 27px;
  }

  .content {
    p {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      line-height: 24px;
      text-indent: 2em;
      margin-top: 20px;
    }
    div {
      img {
        float: left;
      }

      p {
        margin-left: 565px;
      }
    }
  }
}


.hg_wd_listbox .el-collapse-item__content {
  cursor: pointer;
}
</style>
